<template>
  <div class="bigBox">
    <div class="box">
      <div class="header">
        <div class="header1">回收站</div>
        <div class="header2" @click="returnT">
          <span class="iconfont icon-w_fanhui"></span>返回
        </div>
      </div>
      <!-- 搜索框部分 -->
      <div class="searchBox">
        <div class="tit">
          <span class="iconfont icon-fenlei-1 icon1"></span>筛选
        </div>
        <div class="row">
          <el-form :inline="true" class="demo-form-inline">
            <div class="aa">
              <el-form-item label="输入搜索：">
                <el-input
                  v-model="courses"
                  placeholder="输入课程标题关键字……"
                />
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-col :span="11">
                  <el-date-picker
                    v-model="starttime"
                    type="date"
                    placeholder="开始日期"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="2" class="text-center"> - </el-col>
                <el-col :span="11">
                  <el-date-picker
                    v-model="endtime"
                    placeholder="结束日期"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item class="cc">
                <el-button type="primary" @click="onSearch" class="Btn">
                  <span class="iconfont icon-shaixuanguolv icon2"></span>
                  筛选
                </el-button>
                <el-button type="primary" @click="onClean" class="cleanBtn">
                  清空筛选条件
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 表格部分 -->
      <div class="dataBox">
        <div class="row1">
          <div class="rowL">
            <span class="iconfont icon-liebiao"></span>课程列表
          </div>
        </div>
        <div>
          <el-table
            :header-cell-style="{
              background: '#9037f3',
              color: '#ffffff',
              textAlign: 'center',
            }"
            :rules="rules"
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="60" />
            <!-- <el-table-column label="编号">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column> -->
            <el-table-column property="id" label="编号" width="85" />
            <el-table-column
              property="coursename"
              label="课程名称"
              width="120"
            />
            <el-table-column property="url" label="列表图" width="132">
              <template #default="scope">
                <img :src="scope.row.url" style="width: 97px; height: 54px" />
              </template>
            </el-table-column>
            <el-table-column
              property="state"
              label="课程上架"
              width="80"
              color="red"
            />
            <el-table-column
              property="courseprice"
              label="报名费（元）"
              width="80"
            />
            <el-table-column property="sales" label="销量" width="80" />
            <el-table-column property="persion" label="上传人" width="80" />
            <el-table-column
              property="updatetime"
              label="上传时间"
              width="163px"
            />
            <el-table-column property="msg" label="操作">
              <template #default="scope">
                <el-button
                  style="color: #9137f3; font-size: 12px"
                  link
                  type="primary"
                  size="small"
                  @click="toReturn(scope.row.id)"
                  >恢复</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="删除后无法恢复，确定删除？"
                  @confirm="confirmEvent1(scope.row.id)"
                  @cancel="cancelEvent1"
                >
                  <template #reference>
                    <span
                      style="
                        margin-left: 10px;
                        color: #9137f3;
                        font-size: 12px;
                        cursor: pointer;
                      "
                      >彻底删除</span
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dataBoxButton">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="删除后无法恢复，确定删除？"
            @confirm="confirmEvent"
            @cancel="cancelEvent"
          >
            <template #reference>
              <span style="color: #999999; font-size: 13px; cursor: pointer"
                >彻底批量删除</span
              >
            </template>
          </el-popconfirm>
          <div class="page">
            <div class="total">
              <span style="font-family: '思源黑体'; font-weight: 400">共</span>
              <span
                style="
                  font-family: '思源黑体 Bold', '思源黑体 ,Regular';
                  font-weight: 700;
                  color: #9137f3;
                "
                >{{ Math.ceil(total / limit) }}</span
              >
              <span style="font-family: '思源黑体'; font-weight: 400">页/</span>
              <span
                style="
                  font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
                  font-weight: 700;
                  color: #9137f3;
                "
                >{{ total }}</span
              >
              <span style="font-family: '思源黑体'; font-weight: 400"
                >条数据</span
              >
              <el-pagination
                v-model:page-size="limit"
                :page-sizes="[10, 20, 30]"
                default
                background
                @current-change="changePage"
                layout="prev, pager, next"
                :total="total"
                class="mt-4"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import axios from '../utils/http'
import { reactive, onMounted, ref } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElCol,
  ElDatePicker,
  ElTable,
  ElTableColumn,
  ElMessage,
  ElPagination,
  ElPopconfirm,
} from 'element-plus'
import { RouterLink } from 'vue-router'
let total = ref()
let limit = ref(10)
let page = ref(1)

//返回按钮跳转
const router = useRouter()
const returnT = function () {
  router.push({
    name: 'courseManagement',
  })
}
// 筛选
let courses = ref('')
let starttime = ref('')
let endtime = ref('')
const onSearch = () => {
  console.log(courses.value)
  axios({
    url: '/course/rubbish/terms',
    params: {
      courses: courses.value,
      starttime: starttime.value,
      endtime: endtime.value,
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log('筛选的', data)
    if (data.code == 0) {
      tableData.value = data.data.list
      total.value = data.total
    }
  })
}
//清空筛选条件
const onClean = () => {
  courses.value = ''
  starttime.value = ''
  endtime.value = ''
  getData()
}
//表格渲染
let tableData = ref([])
const getData = function () {
  axios({
    url: '/course/list/rabbish',
    method: 'get',
    params: {
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      tableData.value = data.data.list
      //console.log(tableData)

      total.value = data.data.totalCount
      //console.log(total.value)
    }
  })
}
//表格
// interface User {
//   date: string
//   name: string
//   address: string
// }
// const multipleTableRef = ref()

// const toggleSelection = (rows) => {
//   if (rows) {
//     rows.forEach((row) => {
//       // TODO: improvement typing when refactor table
//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//       // @ts-expect-error
//       multipleTableRef.value.toggleRowSelection(row, undefined)
//     })
//   } else {
//     multipleTableRef.value.clearSelection()
//   }
// }

// 恢复到轮播图管理
const toReturn = (id) => {
  axios({
    url: '/course/toCourse',
    method: 'post',
    params: {
      id: id,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: '恢复成功',
        type: 'success',
      })
      getData()
    }
  })
}
// 确定彻底批量删除
const confirmEvent = () => {
  getId()
  axios({
    url: `/course/allDelToRabbish?${ids}`,
    method: 'post',
  }).then(({ data }) => {
    console.log('确定彻底批量删除', data)
    if (data.code == 0) {
      ElMessage({
        message: '批量删除成功',
        type: 'success',
      })
      getData()
    }
  })
}

// 取消批量删除
const cancelEvent = () => {
  console.log('cancel!')
}

// 获取选择的所有数据的id
let ids = ''
let idS = []
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log('multipleSelection', multipleSelection.value)
}

//循环取id
const getId = function () {
  for (let e of multipleSelection.value) {
    idS.push(e.id)
  }
  console.log(idS)
  for (let i = 0; i < idS.length; i++) {
    if (i == idS.length - 1) {
      ids += `ids=${idS[i]}`
    } else {
      ids += `ids=${idS[i]}&`
    }
  }
  console.log(5555, ids)
}

// 确定一条删除
const confirmEvent1 = (id) => {
  axios({
    url: '/rabbish/del',
    method: 'post',
    params: {
      id: id,
    },
  }).then(({ data }) => {
    console.log('确定一条删除', data)
    if (data.code == 0) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getData()
    }
  })
}
// 取消一条删除
const cancelEvent1 = () => {
  console.log('cancel!')
}
//分页
let changePage = function (value) {
  page.value = value
  getData()
}
//挂载后
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
@import url('../assets/J-iconfont/iconfont.css');
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}
.box {
  width: 1100px;
  margin: 0 127px;
  // border: 1px solid aqua;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  .header {
    margin-top: 25px;
    margin-bottom: 25px;
    width: 1100px;
    display: flex;
    justify-content: space-between;
    .header1 {
      font-size: 24px;
      color: #9037f3;
      font-weight: 700;
    }
    .header2 {
      width: 80px;
      height: 34px;
      border: 1px solid #9037f3;
      border-radius: 3px;
      color: #9037f3;
      text-align: center;
      line-height: 34px;
      margin-right: 20px;
      span {
        margin-right: 5px;
      }
    }
  }
  .searchBox {
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    width: 1033px;
    margin-bottom: 15px;
    padding: 20px 37px 35px 30px;
    .tit {
      color: #999999;
      font-size: 14px;
      margin-bottom: 25px;

      span {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.dataBox {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  width: 1040px;
  padding: 14px 30px 40px 30px;
  .row1 {
    display: flex;
    justify-content: space-between;
    // margin-bottom: 25px;
    .rowL {
      color: #999999;
      font-size: 14px;
      margin-bottom: 25px;
      line-height: 32px;
      span {
        width: 16px;
        height: 16px;
      }
    }
    .rowR {
      .el-button {
        border: 1px solid #9037f3;
        color: #9037f3;
        width: 99px;
        height: 32px;
        // margin-right: 20px;

        span {
          vertical-align: middle;
          margin-right: 10px;
          color: #9037f3;
        }
      }
    }
  }
}
.btn1 {
  margin-right: 20px;
}
.dataBoxButton {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  .allToDel {
    margin-left: 5px;
    font-size: 14px;
    color: #999999;
    line-height: 32px;
  }
}
.cleanBtn {
  border: none;
  color: #9037f3;
  background-color: #ffffff;
  font-size: 12px;
  line-height: 36px;
  margin-left: 30px;
}
.icon2 {
  margin-right: 8px;
}
.Btn {
  width: 98px;
  height: 36px;
  margin-left: 20px;
  background-color: #9037f3;
  border: none;
}
.aa {
  display: flex;
}
.cc {
  display: flex;
}
// 底部批量、分页
.total {
  // border: 1px solid blue;
  display: flex;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}
</style>
<style>
.el-input__wrapper {
  width: 185px;
  height: 37px;
}
.el-input {
  width: 163px;
  height: 37px;
}
.el-form-item__content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.el-table__body-wrapper {
  text-align: center;
}
.el-popover.el-popper {
  min-width: 227px;
}
/* 列表样式 */
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
  font-size: 12px;
  height: 90px;
}
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
  color: #9239f3;
  background-color: #ffffff;
  margin-left: 10px;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #9239f3;
  background-color: #ffffff;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  color: #ffffff;
  background-color: #9239f3;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
